<template>
    <ElTable class="list-table is-border" height="720" :="$attrs" :span-method="spanMethod"  border :data="list">
        <ElTableColumn label="月份" prop="yf" align="center"></ElTableColumn>
        <ElTableColumn label="客服姓名" prop="kfxm" align="center"></ElTableColumn>
        <ElTableColumn label="客服花名" prop="kfhm" align="center"></ElTableColumn>
        <ElTableColumn label="公司名称" prop="companyName" align="center"></ElTableColumn>
        <ElTableColumn label="业务名称" prop="ywmc" align="center"></ElTableColumn>
        <ElTableColumn label="子账号名称" prop="zzhmc" align="center"></ElTableColumn>
        <ElTableColumn label="分摊底薪" prop="ftdx" align="center"></ElTableColumn>
        <ElTableColumn label="开始日期" prop="ksrq" align="center"></ElTableColumn>
        <ElTableColumn label="截至日期" prop="jzrq" align="center"></ElTableColumn>
        <ElTableColumn label="工作天数" prop="gzts" align="center"></ElTableColumn>
        <ElTableColumn label="底薪效益" prop="dxxy" align="center"></ElTableColumn>
        <ElTableColumn label="月销售额" prop="yxse" align="center"></ElTableColumn>
        <ElTableColumn label="提成比例" prop="tcbl" align="center"></ElTableColumn>
        <ElTableColumn label="提成效益(元)" prop="tcxy" align="center"></ElTableColumn>
        <ElTableColumn label="效益合计(元)" prop="xyhj" align="center"></ElTableColumn>
    </ElTable>
</template>

<script setup lang="ts">
import { ElTableColumn } from 'element-plus';
import { computed } from 'vue'
import { addRowAndColSpan } from '@/utils/zeo'

interface Props {
    data?: any[],
}

const props = withDefaults(defineProps<Props>(), {
    data: () => []
})

const list = computed(() => {
    let l = props.data;
    l = addRowAndColSpan(l, 'userId', 'rowspan1', 'colspan1');
    console.log(l);
    return l;
})

const level1 = [
    'kfxm','kfhm','companyName'
]

const spanMethod = ({ row, column }) => {
    if (level1.includes(column.property)) {
        return {
            rowspan: row.rowspan1,
            colspan: row.colspan1
        }
    }
}
</script>